<template>
  <el-main>
    <el-button class="list-btn" type="primary" icon="el-icon-plus" @click="createItem" v-if="btnShow">创建</el-button>
    <el-table :data="tableData" :row-class-name="tableRowClassName" v-if="listShow">
      <el-table-column prop="num" label="序号"></el-table-column>
      <el-table-column prop="name" label="歌名"></el-table-column>
      <el-table-column prop="resourcePath" label="资源路径"></el-table-column>
      <el-table-column prop="duration" label="持续时间"></el-table-column>
      <el-table-column prop="language" label="语言"></el-table-column>
      <el-table-column prop="publishTime" label="发布时间"></el-table-column>
      <el-table-column prop="heat" label="热度"></el-table-column>
      <el-table-column prop="id" label="操作">
        <template slot-scope="scope">
          <el-button
            class="list-btn"
            type="success"
            @click="editItem(scope.$index,scope.row)"
            icon="el-icon-edit"
            circle
          ></el-button>
          <el-button 
            class="list-btn"
            type="danger"
            @click="deleteItem(scope.$index,scope.row)"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-form ref="form" :model="form" label-width="80px" v-if="editShow">
      <el-form-item label="歌名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="资源路径">
        <el-input v-model="form.resourcePath"></el-input>
      </el-form-item>  
      <el-form-item label="语言">
        <el-input v-model="form.language"></el-input>
      </el-form-item>
       <el-form-item label="热度">
        <el-input v-model="form.heat"></el-input>
      </el-form-item>
      <el-form-item label="持续时间">
      <el-col :span="11">
          <el-time-picker value-format="HH:mm:ss" placeholder="选择时间" v-model="form.duration" style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="发布时间">
      <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.publishTime" style="width: 100%;"></el-date-picker>
        </el-col>
       </el-form-item>
      <el-form-item label="Mv">
        <el-select v-model="form.mv" value-key="id" placeholder="请选择Mv">
			<el-option label="无" :value="null" ></el-option>
          <el-option v-for="mv in edit.mvs" :key="mv.id" :label="mv.resourcePath" :value="mv"></el-option>
        </el-select>
      </el-form-item>
   
       <el-form-item label="歌词">
        <el-checkbox-group v-model="form.lyricses" v-if="newShow==false">
          <el-checkbox
            v-for="lyrics in edit.lyricses"
            :key="lyrics.id"
            :label="lyrics"
            :checked="check(edit.song.lyricses, lyrics)"
          >{{lyrics.resourcePath}}</el-checkbox>
        </el-checkbox-group>
        <el-checkbox-group v-model="form.lyricses" v-else>
          <el-checkbox
            v-for="lyrics in edit.lyricses"
            :key="lyrics.id"
            :label="lyrics"
          >{{lyrics.resourcePath}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="专辑">
        <el-checkbox-group v-model="form.albums" v-if="newShow==false">
          <el-checkbox
            v-for="album in edit.albums"
            :key="album.id"
            :label="album"
            :checked="check(edit.song.albums, album)"
          >{{album.name}}</el-checkbox>
        </el-checkbox-group>
        <el-checkbox-group v-model="form.albums" v-else>
          <el-checkbox
            v-for="album in edit.albums"
            :key="album.id"
            :label="album"
          >{{album.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="所属组合">
        <el-checkbox-group v-model="form.combinations" v-if="newShow==false">
          <el-checkbox
            v-for="combination in edit.combinations"
            :key="combination.id"
            :label="combination"
            :checked="check(edit.song.combinations, combination)"
            name="type"
          >{{combination.name}}</el-checkbox>
        </el-checkbox-group>
        <el-checkbox-group v-model="form.combinations" v-else>
          <el-checkbox
            v-for="combination in edit.combinations"
            :key="combination.id"
            :label="combination"
            name="type"
          >{{combination.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="分类">
        <el-checkbox-group v-model="form.classifications" v-if="newShow==false">
          <el-checkbox
            v-for="classification in edit.classifications"
            :key="classification.id"
            :label="classification"
            :checked="check(edit.song.classifications, classification)"
            name="type"
          >{{classification.name}}</el-checkbox>
        </el-checkbox-group>
        <el-checkbox-group v-model="form.classifications" v-else>
          <el-checkbox
            v-for="classification in edit.classifications"
            :key="classification.id"
            :label="classification"
            name="type"
          >{{classification.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>      
      <el-form-item label="所属歌单">
        <el-checkbox-group v-model="form.songlists" v-if="newShow==false">
          <el-checkbox
            v-for="songlist in edit.songlists"
            :key="songlist.id"
            :label="songlist"
            :checked="check(edit.song.songlists, songlist)"
            name="type"
          >{{songlist.name}}</el-checkbox>
        </el-checkbox-group>
        <el-checkbox-group v-model="form.songlists" v-else>
          <el-checkbox
            v-for="songlist in edit.songlists"
            :key="songlist.id"
            :label="songlist"
            name="type"
          >{{songlist.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
            <el-form-item label="唱片人">
        <el-checkbox-group v-model="form.singers" v-if="newShow==false">
          <el-checkbox
            v-for="singer in edit.singers"
            :key="singer.id"
            :label="singer"
            :checked="check(edit.song.singers, singer)"
            name="type" 
          >{{singer.chinesename}}</el-checkbox>
        </el-checkbox-group>
        <el-checkbox-group v-model="form.singers" v-else>
          <el-checkbox
            v-for="singer in edit.singers"
            :key="singer.id"
            :label="singer"
            name="type" 
          >{{singer.chinesename}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-upload
        class="upload-demo"
        action="/uploadSong"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :limit="1"
        :on-success="uploadSuccess"
        :on-exceed="handleExceed">
        <el-button size="small" type="primary">点击上传歌曲</el-button>
      </el-upload>

      <el-form-item>
        <el-button type="primary" @click="onSubmit" v-if="newShow==false">确定</el-button>
        <el-button type="primary" @click="add" v-else>确定</el-button>
        <el-button @click="back">取消</el-button>
      </el-form-item>
    </el-form>

  </el-main>
</template>

<script type="module">
var songs = [];
var formData = [];
var editData = [];
var delFlag = false;
var path = "/song/";
module.exports = {
  data: function() {
    return {
      tableData: songs,
      editShow: false,
      listShow: true,
      newShow: false,
      btnShow: true,
      edit: editData,
      emptyForm: {
        id: "",
        name: "",
        resourcePath: "",
        duration: "",
        language: "",
        publishTime: "",
        heat: "",
        mv: "",
        lyricses: [],
        albums: [],
        singers: [],
        combinations: [],
        classifications: [],
        songlists: [],
      },
      form: {
        id: "",
        name: "",
        resourcePath: "",
        duration: "",
        language: "",
        publishTime: "",
        heat: "",
        mv: "",
        lyricses: [],
        albums: [],
        singers: [],
        combinations: [],
        classifications: [],
        songlists: [],
      }
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    gettable() {
      $.ajax({
        url: "/listAllSongs",
        type: "get",
        dataType: "json",
        async: false,
        success(data) {
         for (let i in data.songs) {
            songs[i] = {
              num: i,
              name: data.songs[i].name,
              resourcePath: data.songs[i].resourcePath,
              duration: data.songs[i].duration,
              language: data.songs[i].language,
              publishTime: data.songs[i].publishTime,
              heat: data.songs[i].heat,
              id: data.songs[i].id
            };
          }
        }
      });
    },
    deleteItem(item, index) {
      let id = '{"id": ' + index.id + "}";
      $.ajax({
        url: "/deleteSong",
        type: "post",
        data: JSON.parse(id),
        async: false,
        success(data) {
          if(data) {
            delFlag = true;
          } else {
            delFlag = false;
          } 
        }
      });
      if(delFlag) {
        this.$message({
          message: '恭喜你，删除成功',
          type: 'success'
        });
        setTimeout(function(){
          window.location.href = "/index?page=10";
        }, 1500);
      } else {
        this.$message.error('错误窝，删除失败');
      }
    },
    editItem(item, index) {
      this.newShow = false;
      this.listShow = false;
      this.editShow = true;
      this.btnShow = false;
      var id = '{"id": ' + index.id + "}";
      $.ajax({
        url: "/editSong",
        type: "get",
        dataType: "json",
        async: false,
        data: JSON.parse(id),
        success(data) {
           editData = {
            song: data.song,
            lyricses: data.lyricses,
            albums: data.albums,
            singers: data.singers,
            combinations: data.combinations,
            classifications: data.classifications,
            songlists: data.songlists,
            mvs:data.mvs,
          };
          formData = {
            id: data.song.id,
            name: data.song.name,
            resourcePath: data.song.resourcePath,
            duration: data.song.duration,
            language: data.song.language,
            publishTime: data.song.publishTime,
            heat: data.song.heat,
            mv: data.song.mv,
            lyricses: [],
            albums: [],
            singers: [],
            combinations: [],
            classifications: [],
            songlists: [],
          };
        }
      });
      this.edit = editData;
      this.form = formData;
    },
    check(objs, obj) {
      for (let i in objs) {
        if (objs[i].id == obj.id) return true;
      }
      return false;
    },
    onSubmit() {
      $.ajax({
        url: "/updateSong",
        type: "post",
        contentType: "application/json",
        async: false,
        data: JSON.stringify(this.form),
        success(data) {
          window.location.href = "/index?page=10";
        }
      });
    },
    back() {
      this.listShow = true;
      this.editShow = false;
      this.btnShow = true;
      this.emptyForm = {
        id: "",
        name: "",
        resourcePath: "",
        duration: "",
        language: "",
        publishTime: "",
        heat: "",
        mv: null,
        lyricses: [],
        albums: [],
        singers: [],
        combinations: [],
        classifications: [],
        songlists: [],
      };
    },
    createItem() {
      this.newShow = true;
      this.listShow = false;
      this.editShow = true;
      this.btnShow = false;
      $.ajax({
        url: "/newSong",
        type: "get",
        dataType: "json",
        async: false,
        success(data) {
         editData = {
            mvs: data.mvs,
          	lyricses: data.lyricses,
            albums: data.albums,
            singers: data.singers,
            combinations: data.combinations,
            classifications: data.classifications,
            songlists: data.songlists,
          };
        }
      });
      this.edit = editData;
      this.form = this.emptyForm;
    },
    add() {
      $.ajax({
        url: "/addSong",
        type: "post",
        contentType: "application/json",
        async: false,
        data: JSON.stringify(this.form),
        success(data) {
          window.location.href = "/index?page=10";
        }
      });
    },
    handleRemove(file) {
      // 删除文件时的钩子
      resourcePath = "";
    },
    handlePreview(file) {
      // 点击文件列表中已上传的文件时的钩子
    },
    handleExceed(files) {
      // 超出限制的钩子
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    uploadSuccess(response,file,fileList){
      //文件上传成功时的钩子
      var string = file.name
      var name1 = string.split(" - ")[1];
      name = name1.slice(0,name1.lastIndexOf('.'))
      
      this.form.duration = response;
      this.form.name = name;
      this.form.resourcePath = path + file.name;
    }
  },
  
  mounted: function() {
    this.gettable();
  }
};
</script>